<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>formtest</title>
        <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
		<script type="text/javascript">
			$("#myform").validator();
		</script>
        <style type="text/css">
            /* error message */
            .error {
                /* supply height to ensure consistent positioning for every browser */
                height: 15px;
                background-color: #FFFE36;
                border: 1px solid #E1E16D;
                font-size: 11px;
                color: #000;
                padding: 3px 10px;
                margin-left: -2px;
                /* CSS3 spicing for mozilla and webkit */
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                -moz-border-radius-bottomleft: 0;
                -moz-border-radius-topleft: 0;
                -webkit-border-bottom-left-radius: 0;
                -webkit-border-top-left-radius: 0;
                -moz-box-shadow: 0 0 6px #ddd;
                -webkit-box-shadow: 0 0 6px #ddd;
            }
            
            
        </style>
    </head>
    <body>
        <form id="myform">
            <fieldset>
                <h3>Sample registration form</h3>
                <p>
                    Enter bad values and then press the submit button. 
                </p>
                <p>
                    <label>
                        email *
                    </label>
                    <input type="email" name="email" required="required" />
                </p>
                <p>
                    <label>
                        website *
                    </label>
                    <input type="url" name="url" required="required" />
                </p>
                <p>
                    <label>
                        name *
                    </label>
                    <input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" />
                </p>
                <p>
                    <label>
                        age
                    </label>
                    <input type="number" name="age" size="4" min="5" max="50" />
                </p>
                <p id="terms">
                    <label>
                        I accept the terms
                    </label>
                    <input type="checkbox" required="required" />
                </p>
                <button type="submit">
                    Submit form
                </button>
                <button type="reset">
                    Reset
                </button>
            </fieldset>
        </form>
    </body>
</html>
